<template>
    <Card>
        <p slot="title">短信列表</p>
        <div class="search-con search-con-top">
            <div>
                客户姓名：
                <Input v-model="searchData.user_name" style="width: 150px"></Input>
                手机号：
                <Input v-model="searchData.mobile" style="width: 150px"></Input>
                <Button @click="search" type="primary" icon="ios-search" style="margin-left: 10px;">搜索</Button>
                <Button @click="reset" type="success" icon="ios-refresh" style="margin-left: 10px;">刷新</Button>
                <Button type="info" @click="addUser(false)" style="margin-left: 10px;">添加配置</Button>
            </div>
        </div>
        <Table :columns="columns" :data="list" ref="selection" border style="margin-top: 10px;">
            <template slot-scope="{ row , index}" slot="inviterName">
                <span>{{ row.inviter_name }}{{ row.inviter_mobile }}</span>
            </template>
            <template slot-scope="{ row , index}" slot="makeSlot">
                <Button type="info" size="small" @click="record(row.id)">发送记录</Button>
                <Button type="success" size="small" @click="addUser(row)" style="margin-left: 10px;">编辑</Button>
                <Button type="error" size="small" style="margin-left: 10px;" @click="del(row.id)">删除</Button>
            </template>
        </Table>
        <br>

        <Page :total="total" show-sizer show-total show-elevator @on-change="changePage" @on-page-size-change="changeSize">
        </Page>

        <!-- 编辑手机号 -->
        <Modal v-model="addUserModal" title="添加" @on-ok="addUserModalOk">
            <Form :model="formUserInfo" :label-width="100">
                <FormItem label="客户姓名">
                    <Input v-model="formUserInfo.username" placeholder="请输入客户姓名"></Input>
                </FormItem>
                <FormItem label="手机号">
                    <Input v-model="formUserInfo.mobile" placeholder="请输入手机号"></Input>
                </FormItem>
                <FormItem label="短信签名">
                    <Input v-model="formUserInfo.signature" placeholder="请输入短信签名"></Input>
                </FormItem>
                <FormItem label="增加短信数量">
                    <Input v-model="formUserInfo.num" placeholder="请输入增加的信数量" type="number"></Input>
                </FormItem>
            </Form>
        </Modal>

        <!-- 发送记录-->
        <!-- 编辑手机号 -->
        <Modal v-model="recordModal" title="短信发送记录" width="70" :footer-hide="true">
            <div class="search-con search-con-top">
                <div>
                    发送手机号：
                    <Input v-model="recordSearchData.mobile" style="width: 150px"></Input>
                    时间范围：
                    <DatePicker :clearable=false @on-change="datePickChange" type="daterange" placement="bottom-end"
                        placeholder="请选择" style="width: 200px"  format="yyyy-MM-dd" confirm></DatePicker>
                    <Button @click="recordSearch" type="primary" icon="ios-search" style="margin-left: 10px;">搜索</Button>
                    <Button @click="recordReset" type="success" icon="ios-refresh" style="margin-left: 10px;">刷新</Button>
                </div>
            </div>
            <Table :columns="recordColumns" :data="recordList" ref="selection" border style="margin-top: 10px;">
            </Table>
            <br>

            <Page :total="recordTotal" show-sizer show-total show-elevator @on-change="changeRecordPage"
                @on-page-size-change="changeRecordSize" :page-size-opts="pageSize">
            </Page>
        </Modal>
    </Card>
</template>
  
<script>
import config from "@/config";
import { getToken } from "../../libs/util";
const baseUrl = process.env.NODE_ENV === "development" ? config.baseUrl.dev : config.baseUrl.pro;
const baseImgeUrl = process.env.NODE_ENV === "development" ? config.baseImgUrl.dev : config.baseImgUrl.pro;
export default {
    name: "userList",
    data() {
        return {
            searchData: {
                page: 1,
                limit: 10
            },
            pageSize:[10,50,100,200,500,1000,2000,5000],
            // 列表
            columns: [
                {
                    title: 'ID',
                    key: 'app_id',
                    width: "320"
                },
                {
                    title: '客户姓名',
                    key: 'username',
                },
                {
                    title: '手机号',
                    key: 'mobile',
                    width: "130"
                },
                {
                    title: '短信签名',
                    key: 'signature',
                    width: "170"
                },
                {
                    title: '短信条数',
                    key: 'num',
                    width: "100"
                },
                {
                    title: '累计增加',
                    key: 'total_add_num',
                    width: "100"
                },
                {
                    title: '已使用',
                    key: 'total_use_num',
                    width: "90"
                },
                {
                    title: '开通时间',
                    key: 'create_time',
                    width: "150"
                },
                {
                    title: '操作',
                    slot: 'makeSlot',
                    width: "220"
                },
            ],
            // 数据
            list: [],
            total: 0,
            addUserModal: false,
            formUserInfo: {
                id:0
            },
            // 发送记录
            recordModal: false,
            recordSearchData: {
                sms_id:0,
                page: 1,
                limit: 10
            },
            // 列表
            recordColumns: [
                {
                    title: '客户姓名',
                    key: 'username',
                },
                {
                    title: '发送手机号',
                    key: 'mobile',
                },
                {
                    title: '短信签名',
                    key: 'signature',
                },
                {
                    title: '短信内容',
                    key: 'context',
                },
                {
                    title: '发送时间',
                    key: 'create_time',
                },
            ],
            // 数据
            recordList: [],
            recordTotal: 0,
        }
    },
    methods: {
        // 查询管理员信息
        getList() {
            let params = {
                ...this.searchData,
            };
            this.$axios('sms/getList', params).then(res => {
                this.list = res.data;
                this.total = res.total;
            });
        },
        search() {
            this.searchData.page = 1;
            this.getList();
        },
        reset() {
            this.searchData = {
                page: 1,
                limit: 10,
            };
            this.getList();
        },
        changePage(page) {
            this.searchData.page = page;
            this.getList();
        },
        changeSize(size) {
            this.searchData.limit = size;
            this.getList();
        },
        del(id) {
            this.$axios('sms/del', { id: id }).then(res => {
                this.$Message.success('执行成功');
                this.getList();
            });
        },
        addUser(row) {
            if (row) {
                this.formUserInfo.id = row.id;
                this.formUserInfo.username = row.username;
                this.formUserInfo.mobile = row.mobile;
                this.formUserInfo.signature = row.signature;
            }
            this.addUserModal = true;
        },
        addUserModalOk() {
            if (this.formUserInfo.id == 0) {
                this.$axios('sms/add', this.formUserInfo).then(res => {
                    this.$Message.success('添加成功');
                    this.getList();
                });
            } else {
                this.$axios('sms/edit', this.formUserInfo).then(res => {
                    this.$Message.success('编辑成功');
                    this.getList();
                });
            }
        },
        // 发送记录
        record(id) {
            this.recordModal = true;
            this.recordSearchData.sms_id = id;
            this.getRecordList();
        },
        getRecordList(){
            this.$axios('sms/getRecordList', this.recordSearchData).then(res => {
                this.recordList = res.data;
                this.recordTotal = res.total;
            });
        },
        //日期选择
        datePickChange(value) {
            this.recordSearchData.startTime = value[0];
            this.recordSearchData.endTime = value[1];
        },
        recordSearch() {
            this.recordSearchData.page = 1;
            this.getRecordList();
        },
        recordReset() {
            this.recordSearchData.page = 1;
            this.recordSearchData.limit = 10;
            this.getRecordList();
        },
        changeRecordPage(page) {
            this.recordSearchData.page = page;
            this.getRecordList();
        },
        changeRecordSize(size) {
            this.recordSearchData.limit = size;
            this.getRecordList();
        },
    },
    created() {
        this.getList();
    }
}
</script>
<style></style>
  